<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/weilai.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2112411_hq2tab38hp.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
</head>
<body>
    <div class="back">
        <img  src="images/timg (6).gif" alt="">
        <div class="zh1">
            <a href="file:///H:/%E5%A4%A7%E4%BD%9C%E4%B8%9A/%E4%B8%93%E4%B8%9A%E6%B5%85%E8%AF%86.html"><img src="images/shangyige (1).png" alt=""></a>
        </div>
        <div class="kuangjia">
            <div class="title">
                <p>展望未来</p>
            </div>
            <div class="jz">
                 <div class="j1">
                     <span class="iconfont icon-youyou-"></span>
                     <a href="#">教师资格证考试</a>
                 </div>
                 <div class="j2">
                     <img src="images/weilai/1.jpg" alt="">
                 </div>
                 <div class="j3">
                     <img src="images/weilai/2.jpg" alt="">
                 </div>
                 <div class="j4">
                     <img src="images/weilai/3.jpg" alt="">
                 </div>
            </div>
            <div class="qd">
                <div class="q1">
                    <span class="iconfont icon-youyou-"></span>
                     <a href="#">期待</a>
                </div>
                <div class="q2">
                    <p>一个小窝，一束鲜花，一杯下午茶和亲近的人安逸的生活，面朝大海，春暖花开.</p>
                </div>
                <div class="q3">
                    <img src="images/weilai/4.jpg" alt="">
                </div>
            </div>
            <div class="lyb">
                <div class="b">
                <input type="text" placeholder="留下你想说的话吧!">
            </div>
            <div class="huadong">
                <span class="iconfont icon-zhiding"></span>    
              </div>
                </div>
        </div>
    </div>
    <script>
        
        // 对窗口执行滚动监听事件 $(window).scroll()
        //获取滚动条距离顶部的height $(window).scrollTop()
        // 1.对窗口执行滚动监听,获取滚条距离顶部的高度
        $(window).scroll(function(){
            let scrollTop = $(window).scrollTop();
            let opacity;
            console.log(scrollTop)
            opacity = scrollTop/200;
            // 2.当滚动条距离顶部的高度大于等于200px,opacity=1;
            if(scrollTop>=200){
                opacity = 1;
            }
            $(".huadong").css({opacity:opacity})
        })
        $(".huadong").click(function(){
            $("html").animate({scrollTop:"0px"},1000)
        })
    </script>
</body>
</html>